<template>
  <div class="bakimg-view">
    <!-- 城山沟定制化组件 -->
    <img
      class="bakimg-view-img"
      :src="backgroundurlList[backgroundurlIndex].url"
    />
    <div class="bakimg-main">
      <!-- 除草或翻耕或施肥 -->
      <div
        v-for="(itemone, indexone) in commmonList"
        :key="'k1' + indexone"
        class="k1"
        :style="{ top: itemone.top + '%', left: itemone.left + '%' }"
      >
        <img class="k1-img" :src="itemone.img" />
        <div class="k1-line">
          <div class="k1-line-one">{{ itemone.name }}</div>
          <div class="k1-line-two">{{ itemone.date }}</div>
        </div>
      </div>
      <!-- 检测站杆子 -->
      <div
        v-for="(itemtwo, indextwo) in jiancezhang"
        :key="'k2one' + indextwo"
        class="k2one"
        :style="{ top: itemtwo.top + '%', left: itemtwo.left + '%' }"
      >
        <img class="k2one-img" src="../../assets/templeone/backimgone/shebei3.png" />
        <div class="k2one-num" @click="selectFacility(itemtwo)">{{ itemtwo.facilityName }}</div>
        <div v-if="itemtwo.des" class="k2one-line">{{ itemtwo.des }}</div>
      </div>

      <div class="k2two">
        <div class="k2two-line">小型农业气象站</div>
      </div>
      <div class="k2two-dia">
        <div class="k2two-dia-left">
          <div class="k2two-dia-left-line">
            <div class="k2two-dia-left-line1">空气温度</div>
            <div class="k2two-dia-left-line2">25.5℃</div>
          </div>
          <div class="k2two-dia-left-line">
            <div class="k2two-dia-left-line1">空气湿度</div>
            <div class="k2two-dia-left-line2">25.5℃</div>
          </div>
          <div class="k2two-dia-left-line">
            <div class="k2two-dia-left-line1">土壤水分</div>
            <div class="k2two-dia-left-line2">25.5℃</div>
          </div>
        </div>
        <div class="k2two-dia-right">
          <div class="k2two-dia-right-line1">{{ day }}</div>
          <div class="k2two-dia-right-line2">{{ time }}</div>
          <div class="k2two-dia-right-line3"></div>
        </div>
      </div>
      <!-- <div class="k2three">
        <div class="k2three-line">虫报站</div>
      </div> -->
      <!-- 桃园基础信息弹框 -->
      <div class="k3-basemes">
        <!-- 标题 -->
        <div class="k3-basemes-line1">
          <div class="mes-line1-a1">
            <div class="mes-line1-a11">{{ facilityObject.name }}</div>
            <div class="mes-line1-a12">{{ facilityObject.time }}</div>
          </div>
          <div class="mes-line1-a2">
            {{ facilityObject.varietyName }}
          </div>
        </div>
        <!-- 内容 -->
        <div v-for="(evritem,evrindex) in taoyuanevrList" :key="evrindex" class="k3-basemes-line2" :style="{'margin-top': evrindex===0? '8px':'0px'}">
          <div class="mes-line2-a">
            <div class="mes-line2-a1">
              <div class="mes-line2-img">
                <img :src="evritem.img" />
              </div>

              <div class="mes-line2-name">{{ evritem.dataTypeName }}</div>
              <div class="mes-line2-value">{{ evritem.value }}</div>
            </div>
            <div class="mes-line2-change">
              {{ evritem.changevalue }}
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import userApi from '@/api/user/index'
export default {
  name: "Bakimgtwo",
  //   props: {
  //     commessage: {
  //       type: Object,
  //       default: () => {
  //         return {
  //           imgurl: require("@/assets/templeone/background1.png"),
  //           des: "城山沟景区座落于著名的“帝乡佛国”长兴县内，东有两百余亩的桃花湖，西有千年历史文化的城山清凉禅寺，吴承恩在长兴担任县丞时就曾经到过城山沟。景区先后荣获了国家AAA级旅游景区，全国农业旅游示范点、全国休闲农业与乡村旅游示范企业、浙江省林业观光园、浙江省休闲农业与乡村旅游星级示范企业、浙江省三星级乡村旅游点、浙江省五星级农家乐、浙江省农家乐特色点等一系列荣誉。",
  //         };
  //       },
  //     },
  //   },
  components: { },
  data() {
    return {
      // 底部背景
      backgroundurlIndex: 1,
      backgroundurlList: [
        {
          name: "景区",
          url: require("../../assets/templeone/background1.png")
        },
        {
          name: "桃园",
          url: require("../../assets/templeone/background2.png")
        }
      ],
      // 通用图片定位信息
      commmonList: [
        {
          name: "已除草",
          id: 1,
          top: 62,
          left: 38,
          date: "02/26 10时",
          img: require("../../assets/templeone/backimgone/chucao.png")
        },
        {
          name: "已施肥",
          id: 2,
          top: 45,
          left: 22,
          date: "02/26 10时",
          img: require("../../assets/templeone/backimgone/shifei.png")
        },
        {
          name: "已翻耕",
          id: 3,
          top: 52,
          left: 46,
          date: "02/26 10时",
          img: require("../../assets/templeone/backimgone/fangeng.png")
        }
      ],
      // 检测站杆子
      jiancezhang: [
        {
          facilityName: "2#",
          id: 1,
          top: 18,
          left: 55,
          des: "大田物联监测站"
        },
        {
          facilityName: "1#",
          id: 1,
          top: 12,
          left: 60
        },
        {
          facilityName: "3#",
          id: 1,
          top: 12,
          left: 70
        },
        {
          facilityName: "4#",
          id: 1,
          top: 20,
          left: 73
        }
      ],
      // 位置特殊标识图片
      otherimgList: [
        { name: "停车场", top: 75, left: 33 },
        { name: "入口", top: 66, left: 23 },
        { name: "游客中心", top: 70, left: 19 },
        { name: "酒店", top: 63, left: 60 }
      ],
      // 桃园环境数据
      taoyuanevrList: [
        { dataTypeName: '空气温度', value: '25.5℃', changtype: 1, changevalue: '5.5℃', img: require('../../assets/templeone/backimgone/tao4.png') },
        { dataTypeName: '空气湿度', value: '30.5%', changtype: 2, changevalue: '3%', img: require('../../assets/templeone/backimgone/tao1.png') },
        { dataTypeName: '土壤水分', value: '60RH/%', changtype: 3, changevalue: '--', img: require('../../assets/templeone/backimgone/tao2.png') }
      ],
      facilityObject: {
        name: '桃园',
        time: '2/26 14:38',
        varietyName: '桃子'
      },
      imgList: [
        { name: '空气温度', value: '25.5℃', changtype: 1, changevalue: '5.5℃', img: require('../../assets/templeone/backimgone/tao4.png') },
        { name: '空气湿度', value: '30.5%', changtype: 2, changevalue: '3%', img: require('../../assets/templeone/backimgone/tao1.png') },
        { name: '土壤水分', value: '60RH/%', changtype: 3, changevalue: '--', img: require('../../assets/templeone/backimgone/tao2.png') }
      ],
      day: '',
      time: ''
    };
  },
  mounted() {
    this.queryData()
    this.queryTaskInfo()
    this.day = this.$moment(new Date()).format("MM/DD")
    this.time = this.$moment(new Date()).format("HH:mm")
  },
  methods: {
    queryTaskInfo() {
      this.commmonList.forEach(a => {
        a.date = this.$moment(new Date()).format("MM-DD HH")
      })
    },
    queryData() {
      userApi.getFacilityDataItem({}).then((res) => {
        // 赋值总条数
        if (res.code === 1) {
          let data = res.data || [];
          this.jiancezhang = data;
          if (this.jiancezhang.length > 0) {
            if (this.jiancezhang[0]['dataItems'].length > 0) {
              this.selectFacility(this.jiancezhang[0])
            }
          }
        }
      })
    },
    // 选择设施改变展示的实时数据
    selectFacility(data) {
      this.taoyuanevrList = data['dataItems']
      if (this.taoyuanevrList.length > 0) {
        this.taoyuanevrList.forEach(a => {
          var index = this.imgList.findIndex(b => b.name === a.dataTypeName)
          if (index !== -1) {
            a.img = this.imgList[index]['img']
          }
        })
      }
      this.facilityObject.name = data.facilityName
      this.facilityObject.time = this.$moment(new Date()).format("MM/DD HH:mm")
      this.facilityObject.varietyName = data.varietyName || '桃子'
      if (data.facilityName === '桃园') {
        this.taoyuanevrList = [
          { dataTypeName: '空气温度', value: '25.5℃', changtype: 1, changevalue: '5.5℃', img: require('../../assets/templeone/backimgone/tao4.png') },
          { dataTypeName: '空气湿度', value: '30.5%', changtype: 2, changevalue: '3%', img: require('../../assets/templeone/backimgone/tao1.png') },
          { dataTypeName: '土壤水分', value: '60RH/%', changtype: 3, changevalue: '--', img: require('../../assets/templeone/backimgone/tao2.png') }
        ]
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.bakimg-view {
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  overflow: hidden;
  .bakimg-view-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
  }
  .bakimg-main {
    width: 100%;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    z-index: 4;
    overflow: hidden;
    .k1 {
      width: 120px;
      height: 47px;
      //   background-color: aqua;
      position: absolute;
      z-index: 5;
      background-image: url("../../assets/templeone/backimgone/kuang3.png");
      background-repeat: no-repeat;
      background-size: 120px 47px;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      .k1-img{
        width: 50px;
        height: 37px;
        // background-image: url("../../assets/templeone/backimgone/chucao.png");
        background-repeat: no-repeat;
        background-size: 47px 37px;
      }
      .k1-line {
        width: 60px;
        height: 37px;
        .k1-line-one{
          color: #01f8a6;
          font-size: 8%;
        }
        .k1-line-two{
          color: $textColor;
          width: 60px;
          text-align: center;
          white-space: nowrap;
          font-size: 8%;
        }
      }
    }
    .k2one {
      width: 84px;
      height: 170px;
      position: absolute;
      z-index: 5;
      cursor: pointer;
      background-repeat: no-repeat;
      background-size: 84px 97px;
      .k2one-img{
        width: 84px;
        height: 170px;
      }
      .k2one-num{
        position: absolute;
        z-index: 6;
        bottom: 5px;
        left: 22px;
        line-height: 35px;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        border: #01f8a6 1px solid;
        color: #01f8a6;
        text-align: center;
        white-space: nowrap;
        font-weight: 600;
        background-color: rgba(0,0,0,0.5);
      }
      .k2one-line{
        position: absolute;
         z-index: 6;
         width: 120px;
         white-space: nowrap;
         bottom: -21px;
         left: -23px;
         color: $textColor;
         font-size: 12px;
         text-align: center;
         letter-spacing: 1px;
         background-color: rgba(56, 53, 53, 0.5);
      }
    }
    .k2two {
      width: 80px;
      height: 166px;
      position: absolute;
      z-index: 5;
      cursor: pointer;
      background-image: url("../../assets/templeone/backimgone/shebei2.png");
      background-repeat: no-repeat;
      background-size: 80px 166px;
      top: 10%;
      left: 65%;
      .k2two-line{
        position: absolute;
         z-index: 6;
         width: 120px;
         white-space: nowrap;
         bottom: -10px;
         left: -20px;
         color: $textColor;
         font-size: 12px;
         text-align: center;
         letter-spacing: 1px;
         background-color: rgba(56, 53, 53, 0.5);
      }
    }
    .k2two-dia{
       width: 193px;
      height: 100px;
      position: absolute;
      z-index: 5;
      // background-color: #01f8a6;
      background-image: url("../../assets/templeone/backimgone/kuang4.png");
      background-repeat: no-repeat;
      background-size: 193px 100px;
      top: 10%;
      left: 65%;
      color: $textColor;
      display: flex;
      justify-content: center;
      align-items: center;
      .k2two-dia-left{
        width: 115px;
        font-size: 14px;
        .k2two-dia-left-line{
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 110px;
          height: 15px;
          border-left: #01f8a6 3px solid;
          margin-bottom: 5px;
          padding-left: 5px;
          .k2two-dia-left-line1{
            font-size: 14px;
            color: $textColor;
          }
          .k2two-dia-left-line2{
            font-size: 12px;
            color: #01FDCE;
          }
        }

      }
      .k2two-dia-right{
        width: 50px;
        .k2two-dia-right-line1{
          width: 50px;
          text-align: center;
           font-size: 12px;
        }
        .k2two-dia-right-line2{
           width: 50px;
          text-align: center;
           font-size: 12px;
        }
        .k2two-dia-right-line3{
          width: 50px;
          height: 24px;
            background-image: url("../../assets/templeone/backimgone/shuifen.png");
            background-repeat: no-repeat;
            background-size: 24px 24px;
            background-position: center;
        }
      }
    }

    .k2three {
      width: 58px;
      height: 129px;
      position: absolute;
      z-index: 5;
      cursor: pointer;
      background-image: url("../../assets/templeone/backimgone/shebei1.png");
      background-repeat: no-repeat;
      background-size: 58px 129px;
      top: 65%;
      left: 55%;
      .k2three-line{
        position: absolute;
         z-index: 6;
         width: 58px;
         white-space: nowrap;
         bottom: -12px;
         color: $textColor;
         font-size: 12px;
         text-align: center;
         letter-spacing: 1px;
         background-color: rgba(56, 53, 53, 0.5);
      }
    }
    .k3-basemes {
      width: 240px;
      height: 178px;
      position: absolute;
      z-index: 6;
      background-image: url("../../assets/templeone/backimgone/kuang2.png");
      background-repeat: no-repeat;
      background-size: 240px 178px;
      top: 15%;
      left: 35%;
      color: $textColor;
      .k3-basemes-line1{
        margin-top: 15px;
        width: 240px;
        height: 40px;
        display: flex;
        .mes-line1-a1{
          width: 180px;
          height: 40px;
          text-align: center;
          .mes-line1-a11{
            font-size: 14px;
            margin-bottom: 2px;
            color: #00FFCE;
          }
          .mes-line1-a12{
            font-size: 12px;
            color: $textColor;
          }
        }
        .mes-line1-a2{
          width: 60px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          color: #00FFCE;
        }
      }
      .k3-basemes-line2{
        // background-color: #00FFCE;
        width: 240px;
        height: 33px;
        display: flex;
        line-height: 33px;
        // margin-top: 5px;
        // background-color: #01f8a6;
        .mes-line2-a{
          width: 240px;
          height: 33px;
          text-align: center;
          display: flex;
          .mes-line2-a1{
            width: 180px;
            height: 33px;
            display: flex;
            font-size: 14px;
            .mes-line2-img{
              width: 38px;
              height: 33px;
              display: flex;
              justify-content: center;
              align-items: center;
              img{
                width: 18px;
                height: auto;
              }
            }
            .mes-line2-name{
              width: 80px;
              font-size: 14px;
               text-align: left;
            }
            // .mes-line2-value{}
          }
           .mes-line2-change{
          width: 60px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-size: 14px;
        }
        }

      }
    }
  }
}
</style>
